import React from 'react'
// 路由懒加载
import { lazy, Suspense } from 'react'
import '../assets/css/index.css'
// 设置二级路由
import { Route, Routes, Navigate, NavLink } from 'react-router-dom'
// 引入组件
// import Home from '../views/home'
// import Cate from '../views/cate'
// import Cart from '../views/cart'
// import Mine from '../views/mine'
// 懒加载
const Home = lazy(() => import('../views/home'))
const Cate = lazy(() => import('../views/cate'))
const Cart = lazy(() => import('../views/cart'))
const Mine = lazy(() => import('../views/mine'))

class Homes extends React.Component {
    render() {
        return (<div>
            <Suspense>
                {/* 二级路由出口 */}
                <Routes>
                    <Route path='home' element={<Home />}></Route>
                    <Route path='cate' element={<Cate />}></Route>
                    <Route path='cart' element={<Cart />}></Route>
                    <Route path='mine' element={<Mine />}></Route>
                    <Route path='' element={<Navigate to={'home'}></Navigate>}></Route>
                </Routes>
            </Suspense>

            {/* 底部导航 */}
            <div className='bottom_nav'>
                <NavLink to={'/index/home'}>首页</NavLink>
                <NavLink to={'/index/cate'}>分类</NavLink>
                <NavLink to={'/index/cart'}>购物车</NavLink>
                <NavLink to={'/index/mine'}>个人中心</NavLink>
            </div>
        </div >)
    }
}
export default Homes